<template>
  <div class="points-earn app-main-content-box">
    <!-- 卡片组 -->
    <el-row :gutter="30">
      <!-- 消费奖励积分 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="img-container">
            <img src="../../../assets/icon/i-points-consume.png" class="image">
          </div>
          <div style="padding: 10px;">
            <div class="title">
              <strong>消费奖励积分</strong>
            </div>
            <div class="tips">顾客在线上或者到店消费后可根据消费的金额获得积分</div>
            <div class="status">
              <svg-icon
                icon-class="s-i-dot"
                :class="defaultForm.enablePoints&&defaultForm.enableConsumeBonus?'app-text-color-success':'app-text-color-danger'"
              />
              <span>{{ defaultForm.enablePoints&&defaultForm.enableConsumeBonus?'已启用':'未启用' }}</span>
            </div>
            <el-button type="primary" class="button" @click="openDialog('consume')">管理</el-button>
          </div>
        </el-card>
      </el-col>

      <!--会员开卡奖励积分  -->
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="img-container">
            <img src="../../../assets/icon/i-points-card.png" class="image">
          </div>
          <div style="padding: 10px;">
            <div class="title">
              <strong>会员开卡奖励积分</strong>
            </div>
            <div class="tips">粉丝注册成为会员或者从低等级会员升级到高级会员后奖励</div>
            <div class="status">
              <svg-icon
                icon-class="s-i-dot"
                :class="defaultForm.enablePoints?'app-text-color-success':'app-text-color-danger'"
              />
              <span>{{ defaultForm.enablePoints?'已启用':'未启用' }}</span>
            </div>
            <el-button type="primary" class="button" @click="openDialog('award')">管理</el-button>
          </div>
        </el-card>
      </el-col>

      <!--会员充值奖励积分  -->
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="img-container">
            <img src="../../../assets/icon/i-points-recharge.png" class="image">
          </div>
          <div style="padding: 10px;">
            <div class="title">
              <strong>会员充值奖励积分</strong>
            </div>
            <div class="tips">会员充值成功后根据卡的权益奖励顾客一定的积分用于激励顾客充值</div>
            <div class="status">
              <svg-icon
                icon-class="s-i-dot"
                :class="defaultForm.enablePoints?'app-text-color-success':'app-text-color-danger'"
              />
              <span>{{ defaultForm.enablePoints?'已启用':'未启用' }}</span>
            </div>
            <el-button type="primary" class="button" @click="openDialog('rights')">管理</el-button>
          </div>
        </el-card>
      </el-col>

      <!--会员推广奖励积分  -->
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="img-container">
            <img src="../../../assets/icon/i-points-promote.png" class="image">
          </div>
          <div style="padding: 10px;">
            <div class="title">
              <strong>会员推广奖励积分</strong>
            </div>
            <div class="tips">推广其他人成为会员后给顾客奖励一定的积分</div>
            <div class="status">
              <svg-icon
                icon-class="s-i-dot"
                :class="defaultForm.enablePoints?'app-text-color-success':'app-text-color-danger'"
              />
              <span>{{ defaultForm.enablePoints?'已启用':'未启用' }}</span>
            </div>
            <el-button type="primary" class="button" @click="openDialog('promoters')">管理</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 弹框 -->
    <dialog-earn-consume-points ref="consumePoints" />
    <dialog-earn-other-points ref="otherPoints" />
  </div>
</template>

<script>
import DialogEarnConsumePoints from './DialogEarnConsumePoints'
import DialogEarnOtherPoints from './DialogEarnOtherPoints'
export default {
  components: {
    DialogEarnConsumePoints,
    DialogEarnOtherPoints
  },
  props: {
    tabName: {
      type: String,
      require: true
    },
    form: {
      type: Object,
      require: true
    },
    defaultForm: {
      type: Object,
      require: true
    }
  },
  data() {
    return {}
  },
  watch: {
    tabName(val) {
      if (val === 'earn') {
      }
    }
  },

  mounted() {},
  methods: {
    /**
       * 按钮组
       */
    // 点击管理
    openDialog(type) {
      if (this.defaultForm.enablePoints) {
        switch (type) {
          // 消费奖励积分
          case 'consume':
            this.$refs.consumePoints.open(this.form).then(res => {})
            break
            // 开卡 权益 推广积分
          default:
            this.$refs.otherPoints.open(type).then(res => {})
            break
        }
      } else {
        this.$alert(
          '积分功能未启用，如果需要开启请前往基础设置中启用积分',
          '温馨提示',
          {
            confirmButtonText: '确定',
            type: 'warning',
            center: true,
            callback: action => {}
          }
        )
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .points-earn {
    .el-card {
      margin-bottom: 20px;
    }
    /* 标题 */
    .title {
      text-align: center;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    /* 图片 */
    .img-container {
      display: block;
      position: relative;
      margin: 10px 0;
      padding-bottom: 50%;
      img {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: 100%;
      }
    }
    /* 说明 */
    .tips {
      min-height: 32px;
      margin: 10px 0;
      font-size: 14px;
      color: $light-font-color;
      text-align: center;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    /* 状态 */
    .status {
      margin-bottom: 10px;
      text-align: center;
      font-size: 14px;
    }
    /* 按钮 */
    .button {
      width: 100%;
    }
  }
</style>
